import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import {
  Subjects,
  TeacherList
} from './style.js'

export default class Teacher extends Component {
  constructor(props) {
    super(props);
    this.state = {
      select: ""
    }
  }
  renderSub(subject, parent) {
    let arr = []
    subject.map(item => {
      if(parent === item.get('eduRank')) {
        arr.push(
          <a onClick={()=> {this.setState({select: item.get('id')});this.renderTeacher(item.get('id'))}} className={this.state.select === item.get('id') ? 'active': ''} key={item.get('id')}>{item.get('name')}</a>
        )
      }
    })
    return arr
  }

  renderList(list) {
    let arr = []
    list.map(item => {
      arr.push(
        <Link to={`/teacher/${item.get('id')}`} key={item.get('id')}>
          <li>
            <img src={item.get('photo')?item.get('photo'):'http://smallfilesforlive.oss-cn-hangzhou.aliyuncs.com/jpg/1528788784815/潘秀玲.jpg'} /> 
            <div className="teacher-info">
              <p className="name">{item.get('name')}</p>
              <p className="school">{item.get('school')}</p>
              <p>{item.get('description')}</p>
            </div>
          </li>
        </Link>
      )
    })
    return arr
  }

  renderTeacher(id) {
    this.props.getTeacher({
      eduRank: this.props.parent,
      subjectId: id
    })
  }

  componentDidMount() {
    this.renderTeacher()
  }
  render() {
    const { subject, list, parent } = { ...this.props }
    return (
      <div>
        <Subjects>
          <li>
            <a onClick={()=> {this.setState({select: ""});this.renderTeacher('')}} className={this.state.select ? '': 'active'}>全部</a>
            {
              this.renderSub(subject, parent)
            }
          </li>
        </Subjects>
        <TeacherList>
          {
            list.size > 0 ? this.renderList(list) : <p style={{textAlign: 'center', lineHeight: '28px'}}>暂无老师数据</p>
          }
        </TeacherList>
      </div>
    )
  }
}